<template>
    <div class='fxn-body'>
        <div class="fxn-top">
            <div class="left">跟进记录类型设置</div>
            <div class="right">
                <el-button type="primary" icon="Check" @click="handleSubmit">保存</el-button>
            </div>
        </div>
        <div class="fxn-section fxn-margin-t-20">
            <div class="fxn-follow">
                <div class="fxn-margin-b-20">
                    <el-button type="primary" plain icon="Plus" @click="handleAdd">添加类型</el-button>
                </div>
                <div class="item" v-for="(item,index) in addData" :key="index">
                    <div class="left">
                        <el-input v-model="item.value" placeholder="请输入类型名称"></el-input>
                    </div>
                    <div class="right">
                        <el-icon :size="18" color="#F56C6C" @click="handleDel(index)"><CircleCloseFilled /></el-icon>
                    </div>
                </div>
            </div>
        </div>
        <!-- Section End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 1,
                perPage: 10,
                type: false,
                loading: false,
                listData: [
                    {id: 1}
                ],

                //表单
                addData: [],
            })

            //获取类型
            const getList = () => {
                proxy.$http.post('/api/setting/recordList')
                .then(res=>{
                    const { code, error ,data } = res;
                    if(code != 200){
                        proxy.$message.error(error);
                    }else{
                        state.addData = data.map(item => {
							return {
								value: item
							}
						})
                    }
                })
            }

            //添加类型
            const handleAdd = () => {
                let form = {
                    value: ''
                }
                state.addData.push(form);
            }

            //保存类型
            const handleSubmit = () => {
                let value = [];
                for (let index = 0; index < state.addData.length; index++) {
                    value.push(state.addData[index].value)
                }
                proxy.$http.post('/api/setting/recordedit', {
                    value: value,
                })
                .then(res=> {
                    const { code, error ,data } = res;
                    if(code != 200){
                        proxy.$message.error(error);
                    }else{
                        proxy.$message.success(data);
                        getList();
                    }
                })
            }

            //删除类型
            const handleDel = (index) => {
                state.addData.splice(index,1);
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                state.getList(state.page,state.perPage,state.type);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                state.getList(state.page,state.perPage,state.type);
            }
            
            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                handleAdd,
                handleDel,
                handleSubmit,
                
                //组件方法
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    .fxn-follow{
        max-width: 400px;
        padding: 20px 50px;
    }

    .fxn-follow .item{
        margin-bottom: 20px;
        overflow: hidden;
    }

    .fxn-follow .left{
        float: left;
    }

    .fxn-follow .right{
        float: left;
        padding-left: 10px;
        cursor: pointer;
        display: none;
        position: relative;
    }

    .fxn-follow .item:hover .right{
        display: block;
    }

    .fxn-follow .right .el-icon{
        position: absolute;
        top: 8px;
    }
</style>